<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.userName" clearable class="filter-item" style="width: 200px;"
        :placeholder="$t('请输入用户名称')" />
      <el-input v-model="listQuery.orderSn" clearable class="filter-item" style="width: 200px;"
        :placeholder="$t('Ticket_number')" />

      <el-select v-model="listQuery.payTypes" class="filter-item" multiple placeholder="请选择支付方式">
        <el-option v-for="item in payTypes" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-select v-model="listQuery.orderSources" clearable class="filter-item" multiple :placeholder="$t('请选择订单来源')">
        <el-option v-for="item in orderSourceList" :key="item.id" :value="item.id" :label="item.name"></el-option>
      </el-select>
      <el-select v-model="listQuery.orderTypes" clearable class="filter-item" multiple :placeholder="$t('请选择订单类型')">
        <el-option v-for="item in orderTypeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
      </el-select>

      <el-button class="filter-item" type="primary" icon="el-icon-search"
        @click="handleFilter">{{$t('Search')}}</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit
      highlight-current-row>
      <el-table-column type="index" :index="getIndex" width="50"></el-table-column>

      <!-- <el-table-column align="center" :label="$t('店铺')" prop="shopName"/> -->

      <el-table-column align="center" :label="$t('Ticket_number')" prop="orderSn" />

      <el-table-column align="center" :label="$t('Submission_time')" prop="addTime" />


      <el-table-column align="center" :label="$t('员工名称')" prop="nikeName" />

      <el-table-column align="center" :label="$t('Order_cost')" prop="orderPrice">
        <template slot-scope="scope">
          {{scope.row.orderPrice | floorTwoDecimal}}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('税费金额')" prop="taxPrice">
        <template slot-scope="scope">
          {{scope.row.taxPrice | floorTwoDecimal}}
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" property="taxDetailLs" :label="$t('税费详情')">
        <template slot-scope="scope">
          <div v-for="tax in scope.row.taxDetailLs" :key="tax.code">
            {{tax.code}}: {{tax.totalAmount | floorTwoDecimal}}
          </div>
        </template>
      </el-table-column> -->

      <el-table-column align="center" :label="$t('Payment_method')" prop="payType">
        <template slot-scope="scope">
          <el-tag>{{ payTypeFilter(scope.row.payType) }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Source_of_order')" prop="orderSource">
        <template slot-scope="scope">
          <el-tag>{{ orderSourceFilter(scope.row.orderSource) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('订单类型')" prop="orderType">
        <template slot-scope="scope">
          <div :style="{color:orderTypeColorsFilter(scope.row.orderType)}">{{ orderTypeFilter(scope.row.orderType) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('Operate')" width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['GET /admin/order/order_day_statistics']" type="primary" size="mini"
            @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
  </div>
</template>

<script>
  import { allForPerm } from '@/api/shop'
  import { orderDayDetail } from '@/api/order'
  import BackToTop from '@/components/BackToTop'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import store from '@/store'

  export default {
    name: "orderStatisticsDayDetail",
    components: {
      BackToTop, Pagination
    },
    data() {
      const payTypeMap = {
        1: this.$t('现金支付'),
        2: this.$t('礼物卡支付'),
        3: this.$t('PayPal支付'),
        4: this.$t('余额支付'),
        5: this.$t('Clover支付')
      }

      const orderSourceMap = {
        1: this.$t('手机APP'),
        2: this.$t('门店下单'),
        3: this.$t('官网商城'),
        4: this.$t('客户订阅')
      }
      const orderTypeMap = {
        1: this.$t('自提'),
        2: this.$t('配送'),
        3: this.$t('堂食'),
        4: this.$t('外带')
      }

      return {

        payTypeMap,
        orderSourceMap,
        orderTypeMap,
        orderTypeColors: {
          1: "#cec113",
          2: "#c57615",
          3: "#409EFF",
          4: "#1aa81d"
        },
        // 当前店铺
        shop: store.state.user.shop,
        listLoading: true,
        total: 0,
        payTypes: [{ value: 1, label: '现金支付' },
        { value: 2, label: '礼物卡支付' },
        { value: 3, label: 'PayPal支付' },
        { value: 4, label: '余额支付' },
        { value: 5, label: 'Clover支付' },
        { value: 6, label: '积分支付' },],
        orderSourceList: [
          { id: 1, name: '手机app下单' },
          { id: 2, name: '门店下单' },
          { id: 3, name: '官网商城' },
          { id: 4, name: '订阅' },
        ],
        orderTypeList: [
          { id: 1, name: "自提" },
          { id: 2, name: "配送" },
          { id: 3, name: "堂食" },
          { id: 4, name: "外带" },
        ],
        listQuery: {
          page: 1,
          limit: 20,
          searchDate: undefined,

          userName: undefined,
          orderSn: undefined,

          shopIds: undefined,
          payTypes: undefined,
          orderSources: undefined,
          orderTypes: undefined,
          dateTime: undefined,
        },
        list: [],
        shops: [],
        pickerOptions: {
          shortcuts: [{
            text: this.$t('Yesterday'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_7_days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_month'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }]
        },
      }
    },
    created() {
      this.listQuery.shopId = this.$route.query.shopId
      this.listQuery.searchDate = this.$route.query.searchDate

      this.getList()
      allForPerm().then(response => {
        this.shops = response.data.data.list
      })
    },
    methods: {
      getList() {
        orderDayDetail(this.listQuery)
          .then(response => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter() {
        this.getList()
      },
      handleDetail(row) {
        this.$router.push({ path: '/order/detail', query: { id: row.id } })
      },
      payTypeFilter(type) {
        return this.payTypeMap[type]
      },
      orderSourceFilter(source) {
        return this.orderSourceMap[source]
      },
      orderTypeFilter(source) {
        return this.orderTypeMap[source]
      },
      orderTypeColorsFilter(source) {
        return this.orderTypeColors[source]
      },

      getIndex(index) {
        return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
      }
    }
  }
</script>

<style scoped>

</style>